如何使用 React 和 Dall |
您所在的位置:网站首页 › openai api密钥 › 如何使用 React 和 Dall |
原文: How to Generate Images using React and the Dall-E 2 API – React and OpenAI API Tutorial 嘿,大家好!OpenAI 刚刚发布了它的 DALL-E API,用户可以通过键入查询生成自定义图像。 在本教程中,你将学习如何集成 OpenAI DALL-E 2 API 与 React app。 但首先,Dell-E 是如何工作的呢正如你已经知道的,你必须输入一个查询——就像 熊拿着画笔在星空里,文森特·梵高画。这里面有很多关键词,比如“画笔”、“星空”和“文森特·梵高”。 Dall-E 要做的是搜索这些与我上面提到的关键字相关的图像。然后它将使用人工智能将所有的图像合并为一个,然后提供给我们。 现在让我们学习如何将其集成到 React 应用程序中,以创建具有这些很棒的特性的应用程序。 如何创建 React 应用程序现在,创建一个 React 应用程序。你可以使用 CRA(create-react-app)命令创建它,也可以使用 Vite。 我们需要一个文本字段和一个按钮作为 UI 组件。文本字段将用于从用户获取查询,而按钮将用于触发 API 请求。让我们同时创建一个状态来存储查询和一个函数,该函数将在单击按钮时运行。 import { useState } from "react"; import "./App.css"; function App() { const [prompt, setPrompt] = useState(""); const generateImage = async () => {}; return ( Generate an Image using Open AI API setPrompt(e.target.value)} rows="10" cols="40" /> Generate an Image ); } export default App;我们的输出将会像这样: 如何将 DALL-E 2 API 集成到 React 应用程序让我们看看如何将 DALL-E 2 API 集成到我们的应用程序中。 首先,我们需要访问 OpenAI网站。你需要注册以生成一个 API 密钥。你的账户里还会有 18 美元可以使用。 在注册时选择创建应用程序。 因此,在你创建了你的账户之后,转到 View API Keys 部分,在那里你可以创建你唯一的 API 密钥。查看下面的图片作为参考。 现在在 React App 中,创建一个 .env 文件。这是为了存储 API 密钥。 在这里添加 API 密钥。请注意,在 CRA 和 Vite React App 中,从 .env 文件中获取密钥的方法是不同的。所以请记住这一点。我使用的是 Vite,所以我们是这样做的: VITE_Open_AI_Key = "Your API Key"现在已经添加了 API 密钥,我们需要在 App.js 或 App.jsx 文件中导入一些东西,包括来自 openai SDK 的 Configuration 和 OpenAIApi。但是,我们首先需要在 React App 安装 openai SDK。 只需输入下面的指令安装: npm install openai安装可能需要一些时间。然后,像这样导入我们之前提到的两个东西: import { Configuration, OpenAIApi } from "openai";我们需要创建一个配置变量,它将从 .env 文件中获取 API 密钥。 const configuration = new Configuration({ apiKey: importa.env.VITE_Open_AI_Key, });现在,我们需要将这个配置实例传递给 OpenAIApi,并为 OpenAIApi 创建一个新实例。 const openai = new OpenAIApi(configuration);以下是到目前为止的全部代码: import { Configuration, OpenAIApi } from "openai"; import { useState } from "react"; import "./App.css"; function App() { const [prompt, setPrompt] = useState(""); const configuration = new Configuration({ apiKey: importa.env.VITE_Open_AI_Key, }); const openai = new OpenAIApi(configuration); return ( Generate an Image using Open AI API setPrompt(e.target.value)} rows="10" cols="40" /> Generate an Image ); } export default App;现在,在 generateImage 函数中,我们需要调用之前创建的 OpenAIApi 实例。记住,功能需求是异步的。 const generateImage = async () => { await openai.createImage({ prompt: prompt, n: 1, size: "512x512", }); };如你所见,我们使用的是 openai.createImage。这个 API 用于使用用户查询创建图像。它还需要数量 n,这是我们希望 API 返回的图像的数量,以及图像的尺寸 size。 有三种不同的图像尺寸,不同的价格,如下表所示。如果你使用的是 1024x1024 大小,每张图像将花费 0.020 美元。 现在这个 openai.createImage 返回一些可以存储在变量中的 response 接口。然后,我们可以从 response 变量获得生成的图像链接。 const generateImage = async () => { const res = await openai.createImage({ prompt: prompt, n: 1, size: "512x512", }); console.log(res.data.data[0].url); };但我们还是别这么做了。让我们再创建一个状态来存储这个图像链接,这样我们就可以在 UI 本身中查看图像。 const [result, setResult] = useState(""); const generateImage = async () => { const res = await openai.createImage({ prompt: prompt, n: 1, size: "512x512", }); setResult(res.data.data[0].url); };现在,图像链接将存储在 result 状态中。让我们在 UI 中渲染图像。但是由于结果最初是空的,我们可以创建一个查验。我们将只看到在状态中有链接的图像标记。 {result.length > 0 ? ( ) : ( )}And here's the styling too: .result-image { margin-top: 20px; width: 350px; }UI 现在看起来像这样: 让我们输入一些东西并查看输出: 在上面的例子中,我输入了一匹在红色沙滩里的马,这是结果。 让我们尝试一些更复杂的东西,比如熊拿着画笔在星空里,文森特·梵高画 结果如下: 以上就是你如何创建这个应用。你可以键入任何输入查询,它将通过人工智能生成该图像。 总结这就是所有的内容。现在你知道了如何使用 DALL-E 2 API 创建自己的 React 应用程序,以使用 AI 生成图像。你可以添加更多的功能,所以不妨尝试一下。 如果你想看视频版本,请点击我的视频使用 React 和 Dall-E API 生成图像——React 和 OpenAI API 教程 在我的 YouTube 频道 Cybernatico。 查看代码 GitHub 以供参考。 学习快乐~ |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |